import { StyleSheet } from "react-native";

const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    paddingHorizontal: 12,
    paddingVertical: 10,
    minWidth: 120,
    maxWidth: 240,
    borderRadius: 8,
  },
  infoContainer: {
    flexDirection: "row",
    alignItems: "center",
    flex: 1,
    justifyContent: "space-between",
  },
  durationText: {
    fontSize: 15,
    fontWeight: "500",
    marginRight: 8,
    minWidth: 28,
  },
  waveContainer: {
    flex: 1,
    flexDirection: "row",
    alignItems: "flex-end",
    height: 20,
    justifyContent: "flex-end",
  },
  waveLine: {
    width: 3,
    backgroundColor: "#e0e0e0",
    marginHorizontal: 1,
    borderRadius: 1,
  },
  notPlayedIndicator: {
    width: 8,
    height: 8,
    borderRadius: 4,
    backgroundColor: "#ff3b30",
    marginLeft: 5,
  },
  loadingContainer: {
    marginRight: 8,
  },
});

export default styles;
